<template>
  <div>
    <h2>登录</h2>
    <form @submit.prevent="login">
      <div>
        <label for="username">用户名</label>
        <input type="text" v-model="username" id="username" required />
      </div>
      <div>
        <label for="password">密码</label>
        <input type="password" v-model="password" id="password" required />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import axios from 'axios'

export default {
  setup() {
    const username = ref('')
    const password = ref('')
    const authStore = useAuthStore()

    const login = async () => {
      try {
        const response = await axios.post('/api/auth/login', {
          username: username.value,
          password: password.value,
        })
        authStore.setToken(response.data.token)
        authStore.setToken(response.data.user)

        // Redirect to home page or handle success
      } catch (error) {
        // Handle error
      }
    }

    return {
      username,
      password,
      login,
    }
  },
}
</script>
